<template name="addIndex">
    <div class="modal inmodal" id="addIndexModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{{_ "close"}}</span></button>
                    <h4 id="addIndexModalTitle" class="modal-title">{{_ "add_index"}}</h4>
                </div>
                <div class="modal-body">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1-indexes"
                                                  aria-expanded="true">
                                {{_ "general"}}</a>
                            </li>
                            <li class=""><a id="anchorStorageEngine" data-toggle="tab" href="#tab-2-text-options"
                                            aria-expanded="false">{{_ "text_options"}}</a>
                            </li>
                            <li class=""><a id="anchorValidator" data-toggle="tab" href="#tab-3-geo-options"
                                            aria-expanded="false">{{_ "geo_options"}}</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-4-indexes-collation"
                                            aria-expanded="false">{{_ "collation"}}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- TAB 1 -->
                            <div id="tab-1-indexes" class="tab-pane active">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <div class="col-lg-12">
                                                <input id="inputName" type="text"
                                                       placeholder="{{_ "index_name"}}"
                                                       class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group divField" style="display: none">
                                            <div class="col-lg-6">
                                                <div class="input-group"><input type="text" placeholder="{{_ "field_name"}}"
                                                                                class="form-control txtFieldName">
                                                    <div class="input-group-btn">
                                                        <button data-toggle="dropdown"
                                                                class="btn btn-white dropdown-toggle"
                                                                type="button"><span class="caret"></span></button>
                                                        <ul class="dropdown-menu pull-right">
                                                            <li><a class="addField" href="#"><i class="fa fa-plus"></i>
                                                                {{_ "add_another"}}</a>
                                                            </li>
                                                            <li><a class="deleteField" href="#"><i
                                                                    class="fa fa-remove"></i> {{_ "delete"}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <select
                                                        data-placeholder="{{_ "select_field_type"}}"
                                                        class="chosen-select form-control cmbIndexTypes"
                                                        tabindex="-1">
                                                    <option value="1">1 (ascending)</option>
                                                    <option value="-1">-1 (descending)</option>
                                                    <option value="hashed">hashed</option>
                                                    <option value="2dsphere">2dsphere</option>
                                                    <option value="2d">2d</option>
                                                    <option value="text">text</option>
                                                    <option value="geoHaystack">geoHaystack</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-lg-12">
                                                <div class="panel-group" id="accordion">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <h5 class="panel-title">
                                                                <a id="anchorOptions" data-toggle="collapse"
                                                                   data-parent="#accordion"
                                                                   href="#collapseOne"
                                                                   aria-expanded="true" class="">{{_ "options"}}</a>
                                                            </h5>
                                                        </div>
                                                        <div id="collapseOne" class="panel-collapse collapse"
                                                             aria-expanded="true">
                                                            <div class="panel-body">
                                                                <form class="form-horizontal">
                                                                    <div class="form-group">
                                                                        <label class="col-lg-3 control-label">{{_ "background"}}</label>
                                                                        <div id="divBackground" class="col-lg-9">
                                                                            <input id="inputBackground" type="checkbox"
                                                                                   class="form-control"
                                                                                   checked=""
                                                                                   style="position: absolute; opacity: 0;"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label class="col-lg-3 control-label">{{_ "unique"}}</label>
                                                                        <div id="divUnique" class="col-lg-9">
                                                                            <input id="inputUnique" type="checkbox"
                                                                                   class="form-control"
                                                                                   checked=""
                                                                                   style="position: absolute; opacity: 0;"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label class="col-lg-3 control-label">{{_ "sparse"}}</label>
                                                                        <div id="divSparse" class="col-lg-9">
                                                                            <input id="inputSparse" type="checkbox"
                                                                                   class="form-control"
                                                                                   checked=""
                                                                                   style="position: absolute; opacity: 0;"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label class="col-lg-3 control-label">{{_ "time_to_live"}} ({{_ "seconds"}})</label>
                                                                        <div class="col-lg-9">
                                                                            <input id="inputTTL" type="number"
                                                                                   class="form-control"
                                                                                   placeholder="{{_ "leave_empty_for_no_ttl"}}"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label class="col-lg-3 control-label">{{_ "partial_filter_expression"}}</label>
                                                                        <div id="divPartial" class="col-lg-9">
                                                                            <textarea id="txtPartial"
                                                                                      class="form-control"></textarea>
                                                                            <span class="help-block m-b-none">{{_ "leave_empty_for_no_partial"}}</span>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- TAB 2 -->
                            <div id="tab-2-text-options" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "version"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbTextIndexVersion"
                                                        data-placeholder="{{_ "leave_empty_for_no_version"}}"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "default_language"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbTextIndexDefaultLanguage"
                                                        data-placeholder="{{_ "leave_empty_for_no_language"}}"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                    <option value="danish">Danish</option>
                                                    <option value="dutch">Dutch</option>
                                                    <option value="english">English</option>
                                                    <option value="finnish">Finnish</option>
                                                    <option value="french">French</option>
                                                    <option value="german">German</option>
                                                    <option value="hungarian">Hungarian</option>
                                                    <option value="italian">Italian</option>
                                                    <option value="norwegian">Norwegian</option>
                                                    <option value="portuguese">Portuguese</option>
                                                    <option value="romanian">Romanian</option>
                                                    <option value="russian">Russian</option>
                                                    <option value="spanish">Spanish</option>
                                                    <option value="swedish">Swedish</option>
                                                    <option value="turkish">Turkish</option>
                                                    <option value="arabic">Arabic</option>
                                                    <option value="iranian persian">Iranian Persian</option>
                                                    <option value="urdu">Urdu</option>
                                                    <option value="hans">Simplified Chinese</option>
                                                    <option value="hant">Traditional Chinese</option>
                                                    <option value="none">None</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "lang_override"}}</label>
                                            <div class="col-lg-10"><input id="inputTextLanguageOverride"
                                                                          type="text"
                                                                          placeholder="{{_ "leave_empty_for_no_override"}}"
                                                                          class="form-control">
                                            </div>
                                        </div>

                                        <div class="form-group divFieldWeight" style="display: none">
                                            <div class="col-lg-4 col-lg-offset-2">
                                                <input type="text" placeholder="{{_ "field_name"}}" disabled
                                                       class="form-control txtFieldWeightName">
                                            </div>
                                            <div class="col-lg-6">
                                                <input type="number" min="1"
                                                       placeholder="{{_ "weight"}} {{_ "leave_empty_for_no_weight"}}"
                                                       class="form-control txtFieldWeight">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!--TAB 3 -->
                            <div id="tab-3-geo-options" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h5 class="panel-title">
                                                <a data-toggle="collapse" href="#div2dOptions" aria-expanded="false">{{_ "2d_options"}}</a>
                                            </h5>
                                        </div>
                                        <div id="div2dOptions" class="panel-collapse collapse" aria-expanded="false"
                                             style="height: 0;">
                                            <div class="panel-body">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-lg-2 control-label">{{_ "min"}}</label>
                                                        <div class="col-lg-10"><input id="input2DMin"
                                                                                      type="number"
                                                                                      placeholder="{{_ "lower_bound"}}"
                                                                                      class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-2 control-label">{{_ "max"}}</label>
                                                        <div class="col-lg-10"><input id="input2DMax"
                                                                                      type="number"
                                                                                      placeholder="{{_ "upper_bound"}}"
                                                                                      class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-2 control-label">{{_ "bit"}}</label>
                                                        <div class="col-lg-10"><input id="input2DBit"
                                                                                      type="number"
                                                                                      placeholder="{{_ "bit_precision"}}"
                                                                                      class="form-control">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h5 class="panel-title">
                                                <a data-toggle="collapse" href="#div2dSphereOptions"
                                                   aria-expanded="false">{{_ "2d_sphere_options"}}</a>
                                            </h5>
                                        </div>
                                        <div id="div2dSphereOptions" class="panel-collapse collapse"
                                             aria-expanded="false"
                                             style="height: 0;">
                                            <div class="panel-body">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-lg-2 control-label">{{_ "version"}}</label>
                                                        <div class="col-lg-10"><input id="input2DSphereVersion"
                                                                                      type="number"
                                                                                      placeholder="{{_ "version"}}"
                                                                                      class="form-control">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h5 class="panel-title">
                                                <a data-toggle="collapse" href="#divGeoHaystackOptions"
                                                   aria-expanded="false">{{_ "geo_haystack_options"}}</a>
                                            </h5>
                                        </div>
                                        <div id="divGeoHaystackOptions" class="panel-collapse collapse"
                                             aria-expanded="false"
                                             style="height: 0;">
                                            <div class="panel-body">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-lg-2 control-label">{{_ "bucket_size"}}</label>
                                                        <div class="col-lg-10"><input id="inputBucketSize"
                                                                                      type="number"
                                                                                      placeholder="{{_ "bucket_size"}}"
                                                                                      class="form-control">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!-- TAB 4-->
                            <div id="tab-4-indexes-collation" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "collation"}}</label>
                                            <div id="divCollationAddIndex" class="col-lg-10">
                                                <textarea id="txtCollationAddIndex"
                                                          class="form-control"></textarea>
                                                <span class="help-block m-b-none">{{{_ "mongodb_version_warning" version="3.4"}}}</span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnSaveIndex" type="button" class="btn btn-primary ladda-button" data-style="contract">
                        {{_ "save"}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>